<template>
  <div>
    <div ref="editor" id="editor" style="text-align: left"></div>
  </div>
</template>

<script>
import E from "wangeditor";
// 没有内置的全屏全屏查看,需要引入css和js
import "./wangEditor-fullscreen-plugin.css";
import "./wangEditor-fullscreen-plugin.js";
export default {
  name: "editor",
  props: {
    setEditor: "",
  },
  data() {
    return {
      editorContent: "",
      editor: null,
    };
  },
  methods: {},
  watch: {
    setEditor(newVal) {
      console.log(newVal);
      this.editor.txt.html(newVal);
    },
  },
  mounted() {
    this.editor = new E(this.$refs.editor);
    // this.editor.customConfig.uploadImgServer = '/upload'
    this.editor.customConfig.uploadImgShowBase64 = true;
    this.editor.customConfig.onchange = (html) => {
      this.editorContent = html;
      this.$emit("getContent", this.editorContent);
    };
    this.editor.customConfig.zIndex = 100;
    // 隐藏“网络图片”tab
    // this.editor.customConfig.showLinkImg = false
    this.editor.customConfig.menus = [
      "head", // 标题
      "bold", // 粗体
      "fontSize", // 字号
      "fontName", // 字体
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      //"link", // 插入链接
      "list", // 列表
      "justify", // 对齐方式
      "quote", // 引用
      //"emoticon", // 表情
      "image", // 插入图片
      // "table", // 表格
      //"video", // 插入视频
      //"code", // 插入代码
      "undo", // 撤销
      "redo", // 重复
    ];
    this.editor.create();
    E.fullscreen.init("#editor"); //
  },
};
</script>

<style lang="less" scoped>
/deep/ .w-e-toolbar {
  flex-wrap: wrap;
  line-height: 20px;
}
</style>

